With our project code ready and running with all its dependencies, we can now go over this structure
and get a better understanding of how an electron application works.
I'll start the application to better demonstrate.
Now, Electron essentially operates with two different types of processes, first being the main application
process.
This is a notorious process which we can see running here in the terminal and will only ever have one
of these.
This main process then creates instances of the chromium browser, which is where our applications front
end code will run, HTML, CSS, etc. This process being referred to as the renderer process and is
what we see here a complete instance of chromium with the chrome dev tools open.
So main no doges and renderer chromium.
Now, depending on how many windows your application has, a single application can have multiple renderer
processes or windows.
In a more traditional sense.
You can think of the main process as being the back end or server side and the window process being
the front end or client side.
Don't worry if this sounds a bit complicated, it's pretty straightforward and I'll demonstrate in a
second.
First up, the main process starting back in packaged JSON.
We already know that when Electron is called in this project directory, it checks this package that
JSON file for the application entry point being this main doges file specified here.
Electron then launches the script as the main application process, a notorious process.
So inmind is first thing that happens is the electron module is required using some structured assignment
to reference a few of its sub modules, one being the instance itself and the other the browser window
module, which we use to create a renderer process or window, will cover each of these in detail later
on the app.
Instant automatically gets created.
So all we do, once the main processor started, is listen for the up instance to be ready, at which
point we call the create window function.
We have to always wait for the app to be ready before attempting to create a renderer process.
The create window function then creates a new renderer process or browser window instance with a width
of 1000 pixels and a height of 800, assigning it to this main window variable, which very importantly
gets created in the global scope of MINDGAMES.
Remember, Main is being run as a notice process, so having a reference to the main window or any other
renderer process here will prevent it from being garbage collected.
Just a small but important technicality to how an electron up runs.
OK, so back to having this new browser window or renderer, which is of course a chromium window,
we can then proceed to load some content into that browser window calling load file index dot html,
this index dot HDMI file here.
I'll open that.
And we see the content of what the app is currently running, very importantly, note that in this Renderer
process, we can still access all of the notorious APIs from the main process.
You might have noticed when creating the renderer, this option here, node integration set to true,
but we'll cover that later.
This simply saying integrate no doges into the renderer process with node integration.
We can also include separate JavaScript to run in the browser window using Noge require function renderer
as being a simple JavaScript file which will run in the browser window, no different to any JavaScript
in a standard browser except for having access to no doorjambs.
So that's the basic structure of an electron up a main process running with node and one or more renderer
processes being chromium browsers run by that main process.
Now when developing electron apps will be making constant changes in both these processes.
So first, the renderer.
I'll change this.
H1 heading to have a bit of styling color red, save that head back over to the app.
And as with a standard web browser, reload with command or or control.
Are there the renderer updates?
We can use modules such as electron reload to automate this reload for us when saving changes in a renderer
process.
But personally, I just prefer reloading the window manually in this manner.
It at least gives us time to change to the app after saving and observing the changes again.
Same thing for any JavaScript being included in this content.
Open the Renderer dodgiest file, add a log message.
I log out the node process object, save back to the app, reload and there we have it in the def tools.
OK, so how about changes to the main process?
In this create window function, our logout creating window.
Save this, check the terminal where this main process is running and nothing refresh the app as before.
Still nothing as that only reloads the browser window content.
Now, this part I generally do want to automate for development as stopping and restarting the app.
Each time we update the main process is a bit unnecessary.
To do this, I'll use node one.
You probably already spotted this in the package JSON file as a dev dependency, meaning it's already
installed.
And in our NPM scripts I have this watch command here.
Gnomon execute electron in the current directory.
Same as the start script here.
Kill the main process, which closes the app and run, npm run.
Watch the name of that script in the package that Jason file enter.
And the app launches as before this time, obviously, having logged that message from the main process
as the app restarted.
Changed the main process again, however, I'll remove the log message and change the browser window
with to 1600 save and immediately node on restarts the main process, which takes us straight to the
app with those changes.
So removing the need to manually restart the app each time.
Hopefully you now have a much better grasp on how an electron app works, so in the next lesson, we'll
dig a little further into using Notorious as part of your app and see how to add third party node modules
from the NPM registry.